<!-- 职级编辑弹窗 -->
<template>
    <div class="ele-body">
      <el-card shadow="never">
        <!-- 搜索表单 -->
        <ele-pro-table
          ref="table"
          :where="where"
          :datasource="url"
          :columns="columns"
          :page-size="20"
          :selection.sync="selection"
          :header-cell-style="{'text-align':'center'}"
          height="calc(100vh - 220px)">
          <template slot="status" slot-scope="{row}">
          <el-tag
            :type="['danger','success'][row.status]"
            size="mini">
            {{ ['停止', '运行'][row.status] }}
          </el-tag>
        </template>
        <!-- 操作列 -->
        <template slot="action" slot-scope="{row}">
            <el-link
              type="success"
              slot="reference"
              :underline="false"
              icon="el-icon-document"
              @click="openLog(row)"
              >日志
            </el-link>
        </template>
          <!-- 表头工具栏 -->
          <template slot="toolbar">
            <el-button
              size="small"
              type="primary"
              icon="el-icon-plus"
              class="ele-btn-icon"
              @click="openAdd()"
              >新增
            </el-button>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-plus"
              class="ele-btn-icon"
              @click="openEdit()"
              >修改
            </el-button>
            <el-button
              size="small"
              type="danger"
              icon="el-icon-delete"
              class="ele-btn-icon"
              @click="removeBatch"
              v-if="false"
              >删除
            </el-button>
          </template>
        </ele-pro-table>

        <div slot="footer">
          <el-button @click="updateVisible(false)">取消</el-button>
          <el-button
            type="primary"
            @click="save"
            >保存
          </el-button>
        </div>
      </el-card>
    <!-- 编辑弹窗 -->
    <task-edit
      :visible.sync="showEdit"
      :data = "editData"
      @done="reload"
      />
      <task-log
      :visible.sync="showLog"
      :data = "editData"
      />

      </div>
    </template>

    <script>
    import TaskEdit from './task-edit';
    import TaskLog from './tasklog.vue'
    export default {
      name: 'TaskQuery',
      components: {TaskEdit,TaskLog},
      data() {
        return {
          // 表单数据
          //form: Object.assign({status: 1}, this.dataItem),
          url: '/scheduled/index',
        // 表格列配置
        columns: [
          {
            columnKey: 'selection',
            type: 'selection',
            width: 45,
            align: 'center',
            fixed: "left"
          },
          {
            prop: 'name',
            label: '任务名称',
            showOverflowTooltip: true,
            minWidth: 100,
            align: 'left'
          },
          {
            prop: 'classpath',
            label: '任务类名',
            showOverflowTooltip: true,
            minWidth: 150,
            align: 'left'
          },
          {
            prop: 'description',
            label: '任务描述',
            showOverflowTooltip: true,
            minWidth: 150,
            align: 'left'
          },
          {
            prop: 'cron',
            label: '定时表达式',
            showOverflowTooltip: true,
            minWidth: 100,
            align: 'center'
          },
          {
            prop: 'status',
            label: '状态',
            showOverflowTooltip: true,
            minWidth: 100,
            align: 'center',
            slot:'status'
          },
          {
          columnKey: 'action',
          label: '操作',
          width: 100,
          align: 'center',
          resizable: false,
          slot: 'action',
          fixed: "right"
        }

        ],
        // 表格搜索条件
        where: {},

          // 表单验证规则
          rules: {
            name: [
              {required: true, message: '请输入任务名称', trigger: 'blur'}
            ],
            classpath: [
              {required: true, message: '请输入任务类名', trigger: 'blur'}
            ],
            cron: [
              {required: true, message: '请输入定时表达式', trigger: 'blur'}
            ]
          },
          // 提交状态
          loading: false,
          // 是否是修改
          isUpdate: false,
          showEdit:false,
          showLog:false,
          editData:null,
          selection: [],
        };
      },
      watch: {
        data() {
          if (this.dataItem) {
            this.form = Object.assign({}, this.dataItem);
            this.isUpdate = true;
          } else {
            this.form = {};
            this.isUpdate = false;
          }
        }
      },
    methods: {
        loaddata(){
        },
    openAdd() {
      this.isUpdate = false;
      this.editData = {};
      this.showEdit = true;
    },
    openLog(row) {
      console.log(row);
      this.editData = row;
      this.isUpdate = true;
      this.showLog = true;
    },

    openEdit() {
      if(this.selection.length!=1)
      {
        this.$message.info('请选择一个任务进行编辑');
        return;
      }
      this.editData = this.selection[0];
      this.isUpdate = true;
      this.showEdit = true;
    },
    reload()
    {
        this.$refs.table.reload();
    },

        /* 保存编辑 */
        save() {
          this.$refs['form'].validate((valid) => {
            if (valid) {
              this.loading = true;
              this.$http[this.isUpdate ? 'put' : 'post'](this.isUpdate ? '/level/edit' : '/level/add', this.form).then(res => {
                this.loading = false;
                if (res.data.code === 0) {
                  this.$message.success(res.data.msg);

                  if (!this.isUpdate) {
                    this.form = {};
                  }
                  this.updateVisible(false);
                  this.$emit('done');
                } else {
                  this.$message.error(res.data.msg);
                }
              }).catch(e => {
                this.loading = false;
                this.$message.error(e.message);
              });
            } else {
              return false;
            }
          });
        },
        /* 更新visible */
        updateVisible(value) {
          this.$emit('update:visible', value);
        }
      }
    }
    </script>

    <style scoped>
    </style>
